import React, { PureComponent,useCallback,useState } from 'react'
class Test extends PureComponent{

  render(){
      console.log('render')
    return (
      <>
      <h1>{this.props.text}</h1>
      <button onClick={this.props.onclick}>改变文本</button>
      </>
    )
  }
}
function handleClick(settxt){
  settxt(Math.random())
}
export default function App() {
  const [txt, settxt] = useState(123)
  const [n, setn] = useState(123)
  const usehandleClick= useCallback(handleClick.bind(null,settxt),[txt])
  return (
    <>
    {/* 函数的地址每次渲染发生了变化，导致子组件重新渲染，若子组件是经过优化的组件，则可能导致优化失效 */}
    <Test text={txt} onclick={usehandleClick
    
    }>App</Test>
   <input type="number"
                value={n}
                onChange={e => {
                  setn(parseInt(e.target.value))
                }}
            />
    </>
  )
}
